<template>
    <div class="box">
        <div class="card" v-for="(item,index) in Lists" :key="index">
            <img :src="item.image" alt="">
            <p class="title">{{item.name}}</p>
            <div class="bot">
                <img :src="item.author_avatar" alt="">
                <div>{{item.author_name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"CardView",  
    props:["Lists"],
    mounted(){
        // console.log(this.Lists)
    }
}
</script>

<style lang="scss" scoped>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    height: 29rem;
    // 强制去除滚动条
    overflow-y: scroll;
    -ms-overflow-style: none;
    overflow : -moz-scrollbars-none;
    &::-webkit-scrollbar {
        width:0 !important;
    }
    // overflow: hidden;
}
.card{
    width: 50%;
    padding: 0.3rem;
    margin-bottom: .5rem;
    box-sizing: border-box;
    background-size: contain;
    background: rgb(249, 246, 246);
    border: .1rem solid #ccffd4;
    border-radius: .5rem;
    img{
        width: 100%;
        height: 10rem;
        border-radius: .48rem;
    }
    .title{
        margin-top: .5rem;
        margin-left: .5rem;
        font-size: 0.8 rem;
        color: #333333;
        line-height: 1rem;
        font-weight: bold
    }
    .bot{
        margin-top: 1rem;
        position: relative;
        display: flex;
        align-items: center;
        margin-left: .5rem;
        img{
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
        }
        div{
            margin-left: .4rem;
            font-size: 0.75rem;
            color: #999999;
        }
    }
}
// @media (min-width: 750px){
//     .card{
//         width: 5rem;
//     }
// }
</style>